{template "header.html"}
<!--首页导航-->
{template "index-daohang.html"}
<!--左边圈子-->


<!--首页列表-->

<div class="d-container d-yincang-pc d-huading-0" 
{if $beijingtu}

{else}
style="background: {if $beijingyanse}{$beijingyanse}{else}linear-gradient(to right, #11d2b5, #745b91){/if}"
{/if}
>
	<div class="d-row">
		
    	<div class="col-md-7">
			<div class="d-yuanjiao-bianhua-10-10 d-kuan  d-bianhua-20 " 
			{if $beijingtu}

            {else}
            style="background: {if $beijingyanse}{$beijingyanse}{else}linear-gradient(to right, #11d2b5, #745b91){/if}"
            {/if}
			>
				
				<div class="row">
					
					<div class="col-md-12 col-xs-12 d-div-zou  d-buhuanhang d-yincang-pc d-huading-100"> 
					    <a href="javascript:goBack();">
					        <img class="d-yuanjiao-20 pull-left" src="{HOME_THEME_PATH}quan/img/fanhui.svg" height="20"/>
						</a>
						<a href="{CLIENT_URL}index.php?ye=0">
						    <img class="pull-right" src="{HOME_THEME_PATH}quan/img/shouye3.png" height="20"/> 
						</a>
						{if $uid == $member.uid}
							<a class="d-yincang-pc d-you-10 d-quxian-0 pull-right" href="{dr_member_url($uriprefix.'quan/home/edit', ['id' => $id])}"> 
								<div class="d-yuanjiao-20 pull-right d-zitiyanse-bai d-zuoyou-10 d-wenzi-14"> 
								<i class="fa fa-cog"></i>
								</div>
							</a>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div>
	<div id="show">
<div class="d-kuangjia d-kuangjia-0">
	<div class="row" >
		<div class="col-md-2 d-yincang d-piaofu-95-0 d-guding-95  " >
			<span style="width: 10px; color: #ffffff;">.</span>
			<div class="d-piaofu-0-2-0 d-guding-95-ding">
				
				{template "index-zuobian-quanzi.html"}
			    
			</div>
			
		</div>
	    <div class="col-md-7">
	        <div class="d-kuan">
	            <!--div class="d-gao-20 d-kuan"></div-->
	            
                <div class="layui-tab layui-tab-brief">
                  <ul class="col-md-12 layui-tab-title d-xia-10">
                    <li class="layui-this "><span class="d-wenzi-18"><i class="bi bi-filter-circle"></i> 圈子</span></li>
                    <li><span class="d-wenzi-18"><i class="bi bi-file-earmark-text"></i> 帖子数</span></li>
                    <li><span class="d-wenzi-18"><i class="bi bi-server"></i> 积分</span></li>
                    <!--li>标签4</li>
                    <li>标签5</li-->
                  </ul>
                  <div class="layui-tab-content">
                    <!--圈子-->
                    <div class="layui-tab-item layui-show">
                        <!---->
                        <div class="d-shang-10 d-kuan"></div>
                        <div v-for="(item, index) in quandata" :key="index">
								<div class="col-md-12 col-xs-12  d-div-zou " style="height:100px">
								    
									<div class="d-beijing-baise d-neikuang-10 d-yuanjiao-10">
										<div class=" d-yuanjiao-10 pull-left">
											<span v-if="index == 0" class="layui-badge d-zuo-10">{{index+1}}</span>
											<span v-if="index == 1" class="layui-badge layui-bg-orange d-zuo-10">{{index+1}}</span>
											<span v-if="index == 2" class="layui-badge  layui-bg-green d-zuo-10">{{index+1}}</span>
											<span v-if="index > 2 " class="layui-badge  layui-bg-cyan d-zuo-10">{{index+1}}</span>
											<img v-if="item.thumb" class="d-yuanjiao-20 d-zuo-10" :src="item.thumb" height="50" width="50"/>
											
											<img v-else class="d-yuanjiao-20 d-zuo-10" src="{HOME_THEME_PATH}quan/img/xinping.png" height="50" width="50"/>
											
										</div>
										<div class="d-zuo-10 pull-left d-quxian-0">
											<a :href="'/quan'+item.id" class="">
												<div class="d-jiacu d-wenzi-16 d-kuan">{{item.title}}</div>
												<div class="d-wenzi-14">
													<span>
														帖子
														{{item.tieshu}}
													</span>
													<span class="d-zuo-20">
														用户: {{item.joins}}
													</span>
													
													<div class="d-chaochu-2 d-zitiyanse-hui-96 d-yincang">
														{{item.jianjie}}
														
													</div>
													
												</div>
											</a>
											
										</div>
										
										<div class="pull-right">
											<a :href="'/quan'+item.id" class="d-kuan-60 pull-right">
											<div class="d-shang-10 d-xia-10 d-you-10 pull-right">
											    
											    
												<div class="d-shang-2 d-neikuang-5-10 d-beijing-hui d-yuanjiao-20 pull-right d-zitiyanse-hei"> {{item.tieshu}} : 条</div>
												<div v-if="index < 3" class="d-shang-2 d-neikuang-5-10 d-yuanjiao-20 pull-right d-zitiyanse-hongse"> <i  class="d-shang-10 d-neikuang-5-10 bi bi-sort-up-alt"></i> </div>
											</div>
											</a>
										</div>
										<div class="d-clear"></div>
									
									</div>
									
									<div class="d-clear"></div>
								</div>
						</div>
						
						
                        <!---->
                    </div>
                    <!--帖子数-->
                    <div class="layui-tab-item">
                        <div v-for="(item, index) in tiedata" :key="index">
								<div class="col-md-12 col-xs-12  d-div-zou " style="height:80px">
								    
									<div class="d-beijing-baise d-neikuang-10 d-yuanjiao-10">
										<div class=" d-yuanjiao-10 pull-left">
											<span v-if="index == 0" class="layui-badge d-zuo-10">{{index+1}}</span>
											<span v-if="index == 1" class="layui-badge layui-bg-orange d-zuo-10">{{index+1}}</span>
											<span v-if="index == 2" class="layui-badge  layui-bg-green d-zuo-10">{{index+1}}</span>
											<span v-if="index > 2 " class="layui-badge  layui-bg-cyan d-zuo-10">{{index+1}}</span>
											<img v-if="item.touxiang" class="d-yuanjiao-20 d-zuo-10" :src="item.touxiang" height="40" width="40"/>
											
											<img v-else class="d-yuanjiao-20 d-zuo-10" src="{HOME_THEME_PATH}quan/img/xinping.png" height="40" width="40"/>
											
										</div>
										<div class="d-zuo-10 pull-left d-quxian-0 d-shang-10">
											<a :href="'/u/'+item.id" class="">
												<div class="d-jiacu d-wenzi-16 d-kuan">{{item.name}}</div>
												<!--div class="d-wenzi-14">
													<span>
														帖子
														{{item.tieshu}}
													</span>
													
												</div-->
											</a>
											
										</div>
										
										<div class="pull-right">
											<a :href="'/u/'+item.id" class="d-kuan-60 pull-right">
											<div class="d-shang-2 d-you-10 pull-right">
											    
											    
												<div class="d-shang-2 d-neikuang-5-10 d-beijing-hui d-yuanjiao-20 pull-right d-zitiyanse-hei"> {{item.tieshu}} : 条</div>
												<div v-if="index < 3" class="d-shang-2 d-neikuang-5-10 d-yuanjiao-20 pull-right d-zitiyanse-hongse"> <i  class="d-shang-10 d-neikuang-5-10 bi bi-sort-up-alt"></i> </div>
											</div>
											</a>
										</div>
										<div class="d-clear"></div>
									
									</div>
									
									<div class="d-clear"></div>
								</div>
						</div>
                    </div>
                    <!--积分-->
                    <div class="layui-tab-item">
                        <div v-for="(item, index) in jifendata" :key="index">
								<div class="col-md-12 col-xs-12  d-div-zou " style="height:80px">
								    
									<div class="d-beijing-baise d-neikuang-10 d-yuanjiao-10">
										<div class=" d-yuanjiao-10 pull-left">
											<span v-if="index == 0" class="layui-badge d-zuo-10">{{index+1}}</span>
											<span v-if="index == 1" class="layui-badge layui-bg-orange d-zuo-10">{{index+1}}</span>
											<span v-if="index == 2" class="layui-badge  layui-bg-green d-zuo-10">{{index+1}}</span>
											<span v-if="index > 2 " class="layui-badge  layui-bg-cyan d-zuo-10">{{index+1}}</span>
											<img v-if="item.touxiang" class="d-yuanjiao-20 d-zuo-10" :src="item.touxiang" height="40" width="40"/>
											
											<img v-else class="d-yuanjiao-20 d-zuo-10" src="{HOME_THEME_PATH}quan/img/xinping.png" height="40" width="40"/>
											
										</div>
										<div class="d-zuo-10 pull-left d-quxian-0 d-shang-10">
											<a :href="'/u/'+item.id" class="d-chaochu">
												<div class="d-jiacu d-wenzi-16 d-kuan">{{item.name}}</div>
												<!--div class="d-wenzi-14">
													<span>
														{SITE_SCORE}：
														{{item.score}}
													</span>
													
												</div-->
											</a>
											
										</div>
										
										<div class="pull-right">
											<a :href="'/u/'+item.id" class="d-kuan-60 pull-right">
											<div class="d-shang-2 d-you-10 pull-right">
											    
											    
												<div class="d-shang-2 d-neikuang-5-10 d-beijing-hui d-yuanjiao-20 pull-right d-zitiyanse-hei"> {{item.score}} : {SITE_SCORE}</div>
												<div v-if="index < 3" class="d-shang-2 d-neikuang-5-10 d-yuanjiao-20 pull-right d-zitiyanse-hongse"> <i  class="d-shang-10 d-neikuang-5-10 bi bi-sort-up-alt"></i> </div>
											</div>
											</a>
										</div>
										<div class="d-clear"></div>
									
									</div>
									
									<div class="d-clear"></div>
								</div>
						</div>
                    </div>
                    <!--div class="layui-tab-item">内容-4</div>
                    <div class="layui-tab-item">内容-5</div-->
                  </div>
                </div>
			</div>
		</div>
		<div class="col-md-3 d-yincang">
			<!--发布-->
			{template "show-fabu.html"}
			
			
			
			<!--版权-->
			{template "index-banquan.html"}
		</div>
	</div>
</div>

<style>
    .tabs {  
  width: 100%;  
  max-width: 600px;  
  margin: 0 auto;  
}  
  
.tab-links {  
  list-style: none;  
  padding: 0;  
  margin: 0;  
  overflow: hidden;  
}  
  
.tab-links li {  
  float: left;  
  margin-right: 10px;  
}  
  
.tab-links li a {  
  display: block;  
  padding: 10px;  
  background: #ccc;  
  color: #333;  
  text-decoration: none;  
}  
  
.tab-links li.active a,  
.tab-links li a:hover {  
  background: #666;  
  color: #fff;  
}  
  
.tab-content {  
  clear: both;  
  padding: 20px;  
  border: 1px solid #ddd;  
}  
  
.tab {  
  display: none;  
}  
  
.tab.active {  
  display: block;  
} 
	.d-xiala-shezhi {
	    z-index: 999999;
	    position: fixed;
		border-radius: 10px 10px 0 0;
	    bottom: 0px;
	    width: 100%;
	    /*height: 40%;*/
	    overflow: auto;
	    background: #b3b3b3;
	    right: 0;
	    left: 0;
	    box-shadow: 0 0 20px #d6d6d6;
	    background-color: rgba(255, 255, 255, 1.0);
	}
.d-xiala-fenxiang {
	z-index: 1000;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 40%;
	overflow: auto;
	background: #ffffff;
	right: 0;
	left: 0;
	box-shadow: 0 0 20px #d6d6d6;
	background-color: rgba(255, 255, 255, 1.0);
}
.d-xiala-weixin {
	    z-index: 999999;
	    position: fixed;
	    top: 0px;
	    width: 100%;
	    height: 60%;
	    overflow: auto;
	    background: #ffffff;
	    right: 0;
	    left: 0;
	    box-shadow: 0 0 20px #d6d6d6;
	    background-color: rgba(54, 54, 54, 0.9);
	}
	.d-guding-95 {
		/*position: sticky;*/
		
		position: sticky;
		top: 95px;
		z-index: 4;
		width: 220px;
		
		/*margin-left: -100px;*/
	}
	.d-guding-95-ding {
	
		position: absolute;
		/*top: 20px;*/
		margin-top: -35px;
		padding-bottom: 10px;
		z-index: 4;
		width: 200px;
		
	}
	#juzhong {
	    display: flex; 
		justify-content: center; 
		align-items: center; 
		background: linear-gradient(to right, #edf1f7, #e7ebf1);
	}
	.d-huiyuan-0{
		background: linear-gradient(to right, #28304a, #514967);
		color: #ffe4de;
		/*background: linear-gradient(to right, #c8cbd5, #d4dbe2);
		color: #555d6e;*/
	}
	.d-huiyuan-1{
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
		/*background: linear-gradient(to right, #c8cbd5, #d4dbe2);
		color: #555d6e;*/
	}
	.d-huiyuan-2{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-huiyuan-3{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-huiyuan-4{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-gao-850{
		height: 100px;
	}
	.d-gao-25 {
		height: 25px;
	}
	.btn-default {
	    color: #333;
	    background-color: #e7ebf1;
	    border-color: #e7ebf1;
	}

}


</style>


<!-- Initialize Swiper -->
<!--script src="{HOME_THEME_PATH}web/js/lazyload.js"></script-->
<script type="text/javascript">

	const { createApp } = Vue;
	const app = createApp({
		data() {
		    return {  
		       //圈子
				quandata:[],
				tiedata:[],
				jifendata:[]
		    };  
		}, 
	methods: {
	    quanzi() {
		    axios.get('{dr_url_prefix('index.php')}?s=quan&c=paiming&m=quan') // 发送GET请求到指定的URL  
		        .then(response => {
					
					if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						this.quandata = response.data.data;
					}
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		tiezi() {
			
		    axios.get('{dr_url_prefix('index.php')}?s=quan&c=paiming&m=tiezi') // 发送GET请求到指定的URL  
		        .then(response => {
					
					if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						this.tiedata = response.data.data;
					}
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		jifen() {
			
		    axios.get('{dr_url_prefix('index.php')}?s=quan&c=paiming&m=jifen') // 发送GET请求到指定的URL  
		        .then(response => {
					
					if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						this.jifendata = response.data.data;
					}
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		huiyuanzuid(quanid,huiyuanzuid) {
			
			//{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid="+quanid+"&yonghuzuid="+huiyuanzuid
		    axios.get('{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid='+quanid+'&huiyuanzuid='+huiyuanzuid) // 发送GET请求到指定的URL  
		        .then(response => {
					this.huiyuanzudata = response.data.data.data;
					/*if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						layer.msg(response.data.data.msg,{time:500});
					}*/
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		huiyuanzulist() {
			
			//{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid="+quanid+"&yonghuzuid="+huiyuanzuid
		    axios.get('{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=huiyuanzulist&quanid={$id}') // 发送GET请求到指定的URL  
		        .then(response => {
					this.huiyuanzudatalist = response.data.data.data;
					/*if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						layer.msg(response.data.data.msg,{time:500});
					}*/
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		huiyuanzu(quanid,huiyuanzuid) {
			
			//{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid="+quanid+"&yonghuzuid="+huiyuanzuid
		    axios.get('{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=huiyuanzu&quanid='+quanid+'&huiyuanzuid='+huiyuanzuid) // 发送GET请求到指定的URL  
		        .then(response => {
					this.huiyuanzudata = response.data.data.data;
					/*if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						layer.msg(response.data.data.msg,{time:500});
					}*/
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		jiaruhuiyuanzu(quanid,huiyuanzuid) {
			
			//{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid="+quanid+"&yonghuzuid="+huiyuanzuid
		    axios.get('{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid='+quanid+'&huiyuanzuid='+huiyuanzuid) // 发送GET请求到指定的URL  
		        .then(response => {
					this.jiaruhuiyuanzudata = response.data.data.data;
					if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						layer.msg(response.data.data.msg,{time:500});
					}
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
		huiyuanzuzhifu(id) {
		    axios.get('/index.php?s=member&app=quan&c=jiaru&m=zhifu&id='+id) // 发送GET请求到指定的URL  
		        .then(response => {
		
					if(response.data.code==1){
						this.zhifu = response.data.data;
					}
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},
	},
	mounted() {
			// 在组件挂载后调用fetchProducts方法  
			
			this.quanzi();
			this.tiezi();
			this.jifen();
			
		},
	});
	// 挂载应用到DOM元素上
	app.mount('#show'); 

</script>

{template "footer.html"}